<script setup>
import { ref, reactive } from 'vue'
import { showMsg, showConfirm } from '@/assets/js/utils'
import {
    getDeviceList,
    deleteDevice,
    getOnvifCameraIp,
} from '@/assets/api/device'
import { useRouter } from 'vue-router'
import deviceNew from './deviceNew.vue'
const router = useRouter()
const deviceClassify = 1
const deviceClassId = ref('1001')
const filterForm = reactive({
    deviceClassify,
    deviceClass: deviceClassId.value,
})
function searchAction() {
    getData(1)
}
const ruleFormRef = ref()
function resetcAction(formEl) {
    // delete filterForm.name
    // delete filterForm.nubmer
    // delete filterForm.current_state
    // console.log(filterForm, 'filterForm')//之前重置搜索
    if (!formEl) return
    formEl.resetFields()
}

const loading = ref(false)
const currentPage = ref(1)
const pageSize = 10
const total = ref(0)
const dataList = ref([])
function getData(page = 1) {
    loading.value = true
    const params = Object.assign(
        {
            page,
            limit: pageSize,
            is_children: 2,
        },
        filterForm
    )
    getDeviceList(params).then((res) => {
        loading.value = false
        const { Items, totalSize } = res.data
        dataList.value = Items
        currentPage.value = +res.data.currentPage
        total.value = totalSize
    })
}
getData(1)
function handleCurrentChange(e) {
    getData(e)
}

// 删除
function deleteAction(item) {
    showConfirm({
        content: '您确定要删除该数据吗',
        onConfirm: () => {
            deleteDevice({ id: item.id }).then(() => {
                showMsg('删除成功')
                getData(currentPage.value)
            })
        },
    })
}

function newAction() {
    router.push(
        `/video/device/new?device_class=${deviceClassId.value}&device_classify=${deviceClassify}`
    )
}
function editAction(item) {
    router.push(
        `/video/device/new?id=${item.id}&device_class=${deviceClassId.value}&device_classify=${deviceClassify}`
    )
}

function gotoChannel(item) {
    router.push(
        '/video/device/channel?id=' + item.id + '&number=' + item.number
    )
}
// const deviceData = ref([
//     { device_class_id: '1001', id: '2001', name: '智能摄像机' },
//     { device_class_id: '1001', id: '2002', name: '视频分析仪' },
//     { device_class_id: '1001', id: '2003', name: 'NVR' },
// ])
// const deviceType = (val) => {
//     let value = deviceData.value.find((item) => item.id === val)
//     return value.name
// }
const gotoVideo = (item) => {
    router.push('/video/device/singleVideo?number=' + item.number)
}
const currentState = new Map([
    ['1', '●正常'],
    ['2', '●报警'],
    ['3', '●离线'],
    ['4', '●故障'],
])
const currentStyle = new Map([
    ['1', ''],
    ['2', 'color:#c30d0d;background:rgb(255 155 155)'],
    ['3', 'color:#7D7D7D;background:#B5B5B5'],
    ['4', 'color:#7D7D7D;background:#B5B5B5'],
])
const tableData = ref([])
const autoAddVisible = ref(false)
const IPloading = ref(false)
function autoAdd() {
    autoAddVisible.value = true
    IPloading.value = true
    getOnvifCameraIp().then((res) => {
        IPloading.value = false
        tableData.value = res.data.map((item) => {
            return { type: 'onvif', ip: item }
        })
    })
}
const NewVisible = ref(false)
const deviceData = ref({})
function addRowData(row) {
    deviceData.value = { ...row, port: 554 }
    NewVisible.value = true
}
function onclose() {
    autoAddVisible.value = false
    NewVisible.value = false
    getData()
}
</script>
<template>
    <div class="filter-box white-box d-flex">
        <el-form
            :inline="true"
            :model="filterForm"
            ref="ruleFormRef"
            class="d-flex-1"
        >
            <el-form-item label="设备名称" prop="name">
                <el-input v-model="filterForm.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备号" prop="number">
                <el-input v-model="filterForm.number" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备状态" prop="currentState">
                <el-select
                    v-model="filterForm.currentState"
                    placeholder="请选择"
                >
                    <el-option label="正常" value="1" />
                    <el-option label="报警 " value="2" />
                    <el-option label="离线 " value="3" />
                    <el-option label="故障 " value="4" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchAction">搜索</el-button>
                <el-button
                    type="primary"
                    plain
                    @click="resetcAction(ruleFormRef)"
                >
                    重置
                </el-button>
                <el-button plain type="primary" @click="autoAdd"
                    >自动添加</el-button
                >
            </el-form-item>
        </el-form>
        <div class="el-form-item">
            <el-button type="primary" @click="newAction">新增</el-button>
        </div>
    </div>
    <div class="white-box d-flex-1 mt-10">
        <el-row :gutter="20" v-loading="loading">
            <el-col :span="6" v-for="(item, index) in dataList" :key="index">
                <div class="iot-card device-card">
                    <div class="iot-card-content">
                        <div
                            class="cardType"
                            :style="[currentStyle.get(item.current_state)]"
                        >
                            {{ currentState.get(item.current_state) }}
                        </div>
                        <h4 class="title">{{ item.name }}</h4>
                        <div class="d-flex">
                            <div class="img">
                                <img
                                    src="@/assets/images/device-media.png"
                                    alt=""
                                />
                            </div>
                            <div class="details">
                                <!-- <el-row :gutter="20">
                                    <el-col :span="12">
                                        <h5>IP</h5>
                                        <p>{{ item.camera_ip }}</p>
                                    </el-col>
                                    <el-col :span="12">
                                        <h5>端口号</h5>
                                        <p>{{ item.camera_port }}</p>
                                    </el-col>
                                    <el-col class="mt-10" :span="12">
                                        <h5>设备号</h5>
                                        <p>{{ item.number }}</p>
                                    </el-col>
                                    <el-col class="mt-10" :span="12">
                                        <h5>摄像头账号</h5>
                                        <p>{{ item.camera_account }}</p>
                                    </el-col>
                                </el-row> -->
                                <div class="fl-bw">
                                    <div>
                                        <h5>设备类型</h5>
                                        <p
                                            :style="
                                                item.device_type_name.length > 5
                                                    ? 'font-size:12px'
                                                    : ''
                                            "
                                        >
                                            <!-- {{ deviceType(item.device_type) }} -->
                                            {{ item.device_type_name }}
                                        </p>
                                    </div>
                                    <div>
                                        <h5 class="text-right">产品</h5>
                                        <p>{{ item.product_name }}</p>
                                    </div>
                                </div>
                                <div class="fl-bw mt-10">
                                    <div>
                                        <h5>设备号</h5>
                                        <p>
                                            {{ item.number }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="state success" v-if="index % 2 == 1">
                            <div class="state-content">
                                <span class="dot success mr-5"></span>
                                在线
                            </div>
                        </div>
                        <div class="state danger" v-else>
                            <div class="state-content">
                                <span class="dot danger mr-5"></span>
                                离线
                            </div>
                        </div> -->
                    </div>
                    <div class="iot-card-oper">
                        <div class="card-button">
                            <el-button
                                link
                                type="primary"
                                @click="editAction(item)"
                            >
                                <el-icon class="mr-5"><EditPen /></el-icon>
                                编辑
                            </el-button>
                        </div>
                        <div class="card-button">
                            <el-button
                                @click="gotoChannel(item)"
                                link
                                type="primary"
                                v-if="
                                    item.device_type == '2002' ||
                                    item.device_type == '2003'
                                "
                            >
                                <el-icon class="mr-5"><View /></el-icon>
                                查看通道
                            </el-button>
                            <el-button
                                link
                                type="primary"
                                @click="gotoVideo(item)"
                                v-else
                            >
                                <el-icon class="mr-5"><View /></el-icon>
                                查看视频
                            </el-button>
                        </div>
                        <div class="card-button delete">
                            <el-button
                                link
                                type="danger"
                                @click="deleteAction(item)"
                            >
                                <el-icon><Delete /></el-icon>
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-empty description="暂无数据" v-if="dataList.length == 0" />

        <div class="fl-bw">
            <div></div>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
                v-if="total > 0"
            />
        </div>
    </div>
    <el-dialog
        v-model="autoAddVisible"
        title="自动添加"
        width="40%"
        v-if="autoAddVisible"
    >
        <el-table
            :data="tableData"
            style="width: 100%"
            @row-click="addRowData"
            class="cursor"
            v-loading="IPloading"
        >
            <el-table-column prop="type" label="类型" align="center" />
            <el-table-column prop="ip" label="IP地址" align="center" />
        </el-table>
    </el-dialog>
    <el-dialog
        v-model="NewVisible"
        title="自动添加"
        width="40%"
        v-if="NewVisible"
    >
        <deviceNew :deviceData="deviceData" @success="onclose"></deviceNew>
    </el-dialog>
</template>
<style lang="scss" scoped></style>
